/*
 * 测肤人数统计
 * @Author: ljb
 * @Date: 2018-09-07 11:27:44
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-26 14:37:38
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-component-user-statistics {
        width: 100%;
        height: 218px;
        line-height: 1;
        padding: 30px 30px 0;
        background: rgba(255,255,255,1);
        border-radius: 8px;
        box-sizing: border-box;
        font-weight: 400;
        h2 {
            font-size: 18px;
            font-weight: 400;
        }
        .time {
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #999999;
        }
        /*人数统计概况*/
        .statistics-info {
            display: flex;
            width: 100%;
            height: 96px;
            padding: 0 100px;
            justify-content: space-between;
            box-sizing: border-box;
            & > div {
                position: relative;
                width: 310px;
                height: 96px;
                padding: 12px 30px;
                border: 1px solid rgba(229,229,229,1);
                border-radius:8px;
                box-sizing: border-box;
                /*icon的样式*/
                .icon {
                    display: inline-block;
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                    overflow: hidden;
                    font-size: 0;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                /*icon的样式 END*/
                /*统计人数信息*/
                .people-info {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 30px;
                    margin: auto 0;
                    height: 50px;
                    p {
                        max-width: 120px;
                        font-size: 28px;
                        color: #333;
                        text-align: center;
                        &.statistics-type {
                            margin-top: 5px;
                            font-size: 16px;
                            color: #999;
                        }
                    }
                }
                /*统计人数信息 END*/
            }
        }
        /*人数统计概况 END*/
    }

</style>
<template>
	<div class="v-component-user-statistics">
		<h2>{{ $t('report.skin_quality') }}</h2>
		<div class="time">
			<span>{{ $t('report.time') }}</span>
			<span>{{ firstTime }}</span>
			<span>-</span>
			<span>{{ $t('report.to_now') }}</span>
		</div>
		<div class="statistics-info">
			<div>
				<div class="icon">
					<img :src="all_icon">
				</div>
				<div class="people-info overflow-ellipsis">
					<p>{{ `${ all_count + $t('common.people')}` }}</p>
					<p class="statistics-type">{{ $t('report.all_people') }}</p>
				</div>
			</div>
			<div>
				<div class="icon">
					<img :src="touch_icon">
				</div>
				<div class="people-info overflow-ellipsis">
					<p>{{ `${ hm_count + $t('common.people')}` }}</p>
					<p class="statistics-type">{{ $t('report_detail.touch_test') }}</p>
				</div>
			</div>
			<div>
				<div class="icon">
					<img :src="image_icon">
				</div>
				<div class="people-info overflow-ellipsis">
					<p>{{ `${ wax_count + $t('common.people')}` }}</p>
					<p class="statistics-type">{{ $t('report_detail.image_test') }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import numberChange from 'src/utils/numberChange';

export default {
	name: 'UserStatistics',
	props: {
		statisticsInfo: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			all_icon: require('src/assets/icon/shuju_zongrenshu_icon.svg'),
			touch_icon: require('src/assets/icon/shuju_jiechucefu_icon.svg'),
			image_icon: require('src/assets/icon/shuju_tuxiangcefu_icon.svg'),
			all_count: 0,
			hm_count: 0,
			wax_count: 0,
		};
	},
	computed: {
		firstTime() {
			const time = this.statisticsInfo.skin_record_date;
			if (!time) return this.$t('common.unknown');
			const time_start = time.start;
			return `${time_start.year + this.$t('home.year') + time_start.month + this.$t('home.month') + time_start.day + this.$t('home.day')}`;
		},
	},
	watch: {
		statisticsInfo: {
			handler(val) {
				numberChange(this, 'all_count', this.isZero(val.all_count));
				numberChange(this, 'hm_count', this.isZero(val.hm_count));
				numberChange(this, 'wax_count', this.isZero(val.wax_count));
			},
			immediate: true,
		},
	},
	methods: {
		/**
         * 是否为0
         * @param  {String} val {需要判断的值}
         * @return {String} {原值或者未知}
         */
		isZero(val) {
			if (!val) return 0;
			return val;
		},
	},
};
</script>
